// 从 vue-router 导入 createRouter（创建路由实例）和 createWebHistory（使用 HTML5 History 模式）
import { createRouter, createWebHistory } from 'vue-router';

// 导入页面组件 Home.vue 和 About.vue，这些组件将作为不同路由的视图
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
import atest from '@/views/test01.vue';
import TeamDivision from '@/components/TeamDivision.vue';
import Member from '@/pages/Member.vue';
import NewsDetails from '@/views/NewsDetails.vue' //导入组件

// 定义基本的页面导航规则（路由映射）
const routes = [
    { path: '/', redirect: '/home' },  // 访问 '/' 时，重定向到 '/home'
    { path: '/home', name: 'Home', component: Home },  // 访问 '/home' 时，渲染 Home.vue，name定义名称,name不是必须，是为了传参
    { path: '/about', name: 'About', component: About },  // 访问 '/about' 时，渲染 About.vue
    { path: '/atest', name: 'atest', component: atest }, 
    { path: '/teamdivision', name: 'teamdivision', component: TeamDivision }, 
    { path: '/member', name:'Product', component:Member},
    {
        path: '/news',                     // 新闻列表路由路径
        component: () => import('@/views/News.vue'),  // 导入组件另一种写法
        children: [                        // 子路由新闻详情配置数组
            {
                path: 'newsdetails/:id?',  // 子路由动态路径，?表示id参数可选
                name: 'newsdetails',      // 路由命名
                component: NewsDetails,   // 对应组件
            },
            {
                path: '',                 // 空路径子路由，当访问/news时默认显示
                component: NewsDetails    // 默认显示的组件
            }
        ]
    }
];

// 创建路由实例
const router = createRouter({
    history: createWebHistory(),  
    routes 
});

export default router;  // 默认导出路由实例router，供 main.ts 使用